﻿<!DOCTYPE html>
<html>
<head>
    <title>OpenLayers Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
	<script src="../js/jquery-1.7.2.min.js"></script>
    <script src="http://localhost:8989/Openlayer/js/openlayers/lib/OpenLayers.js"></script>
	<script src="./openalyer/Layer/GoogleTile.js"></script>
	<script src="js/config.js"></script>
	<script src="js/interface.js"></script>
	<style>
		body{
			margin-top:0px;
		}
		#header{
			width:100%;
			height:50px;
			border:1px solid #cecece;
			min-width:625px;
		}
		#map{
			border-left :1px solid #cecece;
			border-right :1px solid #cecece;
			border-bottom :1px solid #cecece;
		}
		#key-name{
			width : 400px;
			height: 23px;
			margin-top :5px;
			margin-left :50px;
			line-height: 23px;
		}
		#dosearch{
			width :100px;
			height :30px;
		}
		#content{
			position :absolute;
			width :250px;
			height :400px;
			background-color :white;
			border-left :1px solid #cecece;
			border-right:1px solid #cecece;
			border-bottom :1px solid #cecece;
			z-index :1000;
			overflow-y: auto;
		}
		.row{
			font-size: 12px;
			border-top :1px solid #cecece;
			border-right:1px solid #cecece;
			border-bottom :1px solid #cecece;
			height: 100px;
			cursor:  pointer;
		}
		.row .name{
			color: #00c;
		}
	</style>
	
    <script type="text/javascript">
        var proj = 'EPSG:26915';
        var lodLength = 20;
        var resolutions = [];
        var resolution = 156543.033928;
        for (var i = 0; i < lodLength; i++) {
            resolutions.push(resolution);
            resolution /= 2;
        }
        var tileSize = new OpenLayers.Size(256, 256);
        var agsTileOrigin = new OpenLayers.LonLat(-20037508.342787, 20037508.342787);
        var mapExtent = new OpenLayers.Bounds(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787);

        var map;
        var markers;
        function init() {
         format = 'image/png';
            map = new OpenLayers.Map('map', {
                maxExtent: mapExtent,
			    displayProjection: new OpenLayers.Projection("EPSG:4326"),
                controls: [
		            new OpenLayers.Control.Navigation(),
		            new OpenLayers.Control.LayerSwitcher(),
		            //new OpenLayers.Control.PanZoomBar(),
		            new OpenLayers.Control.MousePosition()
				]
            });
            var baseLayer = new OpenLayers.Layer.GoogleTile('google 影像地图',
				'http://mt0.google.cn/vt/lyrs=s@118&hl=zh-CN&gl=CN&src=app&x=${x}&y=${y}&z=${z}&s=Galile',
				{
                tileOrigin: agsTileOrigin,
                resolutions: resolutions,
                sphericalMercator: true,
                maxExtent: mapExtent,
                isBaseLayer: true,
                type: 'png'
                //projection: proj
            });
            
			
			var Layer = new OpenLayers.Layer.GoogleTile('google 矢量地图',
				'http://mt1.google.cn/vt/lyrs=m@189000000&hl=zh-CN&gl=CN&src=app&x=${x}&s=&y=${y}&z=${z}&s=Ga',
				{
                tileOrigin: agsTileOrigin,
                resolutions: resolutions,
                sphericalMercator: true,
                maxExtent: mapExtent,
                isBaseLayer: true,
                type: 'png'
                //projection: proj
            });
			
			
            map.addLayers([Layer,baseLayer]);
			var center=new OpenLayers.LonLat(103.222595,35.70737).transform(map.displayProjection,map.getProjectionObject());
			map.setCenter(center, 4);  //添加平移缩放工具条

			//添加点标注的图层
		  markers = new OpenLayers.Layer.Markers("markers");
          map.addLayer(markers);  
		  markers.setZIndex(200);
			
        }
 </script>
</head>
<body onload="init()">
	<div id="header" style="">
		<b>EastMap</b><input type="text"  id="key-name"/><input type="button" id="dosearch" value="查询"/>
	</div>
	<div id="content">
    </div>
    <div id="map">
    	
    </div>
</body>
<script>
	$(document).ready(function(){
		var height=$(window).height()-100;
		$("#map").height(height);
		
		
		$("#dosearch").click(function(){
			var keyword=$("#key-name").val();
			var data = {
			keyword : keyword
		}
		Interface.geocoding(data, function(response, config) {
				$("#content").empty();
				var list = response.poilist;
				$.each(list, function(index, data) {
					var address=data.address;
					var name=data.name;
					var tel=data.tel;
					var x=data.x;
					var y=data.y;
					var lonlat=new OpenLayers.LonLat(x,y).transform(map.displayProjection,map.getProjectionObject());
					var row=$("<div class='row'>"
							+"<div><span class='name'>"+name+"</span></div>"
							+"<div>地址：<span>"+address+"</span></div>"
							+"<div>电话<span>"+tel+"</span></div>"
							+"</div>");
					row.mouseover(function(){
						$(this).css('background-color','#cecece');
					}).mouseout(function(){
						$(this).css('background-color','white');
					}).click(function(){
						map.setCenter(lonlat, 14);  //添加平移缩放工具条
					});
					$("#content").append(row);
					
					
					var url = './images/marker.png';
	                var sz = new OpenLayers.Size(20, 20);  //尺寸大小
	                var calculateOffset = function(size) {
	                    return new OpenLayers.Pixel(-(size.w/2), -size.h);
	                 };
	                var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);
					var marker = new OpenLayers.Marker(lonlat, icon);
	                markers.addMarker(marker);
					
					
							
				})
			})
		});
	});
</script>
</html>
